
<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="[]">
        <el-submenu index="1">
          <template #title><i class="el-icon-message"></i>学生信息</template>
          <el-menu-item-group>
            <template #title>分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template #title>选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template #title><i class="el-icon-menu"></i>学分详情</template>
          <el-menu-item-group>
            <template #title>分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template #title>选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template #title><i class="el-icon-setting"></i>申请邮箱</template>
          <el-menu-item-group>
            <template #title>请求</template>
            <el-menu-item index="3-1">待审批</el-menu-item>
            <el-menu-item index="3-2">已审批</el-menu-item>
            <el-menu-item index="3-3">拒审批</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="申诉">
            <el-menu-item index="3-4">待审批</el-menu-item>
            <el-menu-item index="3-5">已审批</el-menu-item>
            <el-menu-item index="3-6">拒审批</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
             
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>王五</span>
      </el-header>

      <el-main>
<el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    
    <el-table-column prop="name" label="姓名" width="140">
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="140">
          </el-table-column>
          <el-table-column prop="class" label="班级" width="140">
          </el-table-column>
          <el-table-column prop="account" label="学号" width="140">
          </el-table-column>
          <el-table-column prop="credit" label="学分" width="140">
          </el-table-column>
          <el-table-column prop="SuperAdmin" label="上级管理员" width="140">
          </el-table-column>
    <el-table-column
      align="center">
      <template #header >
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd,drawer = true" circle></el-button>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="searchbox" circle></el-button>
        
          <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->
    <transition name="mybox">
      <el-input
          class="sear"
          v-model="search"
          size="mini"
          v-show="searchshow"
          placeholder="输入关键字搜索"/>
    </transition>

      </template>

      <template #default="scope">
        
        <el-button
          size="mini"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row),drawerupdate = true"></el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row),delSubmit"></el-button>
      </template>
    </el-table-column>
  </el-table>

        
      </el-main>
    </el-container>
  </el-container>

  <el-drawer
      title="新增数据"
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="studentaddform" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="studentaddform.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="studentaddform.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="studentaddform.class"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="studentaddform.account"></el-input>
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="studentaddform.credit"></el-input>
      </el-form-item>
      <el-form-item label="上级管理员">
        <el-input v-model="studentaddform.SuperAdmin"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>



   <el-drawer
       title="修改数据"
       v-model="drawerupdate"
       ref="drawerupdate"
       :direction="direction"
       :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="studentupdateform" label-width="80px">
      <el-form-item  label="姓名">
        <el-input v-model="studentupdateform.name"></el-input>
      </el-form-item>
      <el-form-item  label="性别">
        <el-select v-model="studentupdateform.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="studentupdateform.class"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="studentupdateform.account"></el-input>
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="studentupdateform.credit"></el-input>
      </el-form-item>
      <el-form-item label="上级管理员">
        <el-input v-model="studentupdateform.SuperAdmin"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editStudentInfo_Submit">立即修改</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

  


</template>

<script>
import {toRaw} from '@vue/reactivity'
import router from '@/router/index';
import {ElMessage} from 'element-plus';
import {addStudentInfo} from '../../network/admin/addStudentInfo'
import {deleteStudent} from '../../network/admin/deleteStudent'
import {editStudentInfo} from '../../network/admin/editStudentInfo'
import {getStudentInfo} from '../../network/admin/getStudentInfo'
import {getAllStudentInfo} from '../../network/admin/getAllStudentInfo';
//import {useRouter} from 'vue-router';
import qs from 'qs';
import {computed, ref, refs, defineComponent, getCurrentInstance, onMounted, reactive, toRefs, unref} from "vue";
import {Store} from "vuex";
import store from "@/store/index";

export default {
  // inject: ['reload'],
  data() {
    return {
      drawer: false,
      drawerupdate: false,
      searchshow:false,
      direction: 'rtl',
            tableData:[],
            search: ''
    };
  },
  setup(props) {
    const ruleFormsss = ref(null);
    const {ctx,proxy} =getCurrentInstance();
    // const router=useRouter();
    // 定义变量
    const studentaddform = reactive({
      name: '',
      gender: '',
      class: '',
      account: '',
      credit: '',
      SuperAdmin: ''
    })
    const studentupdateform = reactive({
      name: '',
      gender: '',
      class: '',
      account: '',
      credit: '',
      SuperAdmin: ''
    })
    const stateStudent = reactive({
      index: '',
      id: ''
    })

    function handleClose(done) {
      proxy.$confirm('确认？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

    function handleClose1(done) {
      proxy.$confirm('请确认是否提交该学生信息？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

    //获取学生列表
    getAllStudentInfo().then((result) => {
      //前后端连接成功
      console.log("前后端连接成功")
      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      }
          else {
        //打印后端获取的用户列表数据
        console.log(result.data.result)
        proxy.tableData = result.data.result
        console.log(proxy.tableData)
        // console.log(msg)
        // ElMessage.success({
        //   message:msg,type:'success'});

      }
    }).catch(() => {

      console.log("获取列表失败")
      const msg = "获取列表失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    const searchbox = () => {
      proxy.searchshow = !proxy.searchshow
    }

//添加
    const onSubmit = async () => {
      const form = unref(ruleFormsss);
      const studentadd_data = qs.stringify(studentaddform)
      if (!form) return
      try {
        //数据打印
        console.log(studentadd_data)

        proxy.$confirm('此操作将添加该学生信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addStudentInfo(studentadd_data).then(result => {
            //前后端连接成功
            console.log("前后端连接成功")
            const msg = result.data.msg;
            //打印返回结果状态，
            if (result.data.status == 1) {
              ElMessage.error(msg);
              proxy.drawer = false
            } else {
              console.log(msg)

              proxy.tableData.splice(100, 1, proxy.studentaddform)
              proxy.drawer = false
              window.location.href = 'http://localhost:8080/f';
              ElMessage.success({
                message: msg, type: 'success'
              });
            }
            // proxy.reload()
          }).catch(err => {

          })
          // proxy.$message({
          //   type: 'success',
          //   message: '添加成功!'
          // });
        }).catch(() => {
          proxy.$message({
            type: 'info',
            message: '已取消添加'
          });
        });


        // //执行post
        // addStudentInfo(studentadd_data).then((result) => {
        //   //前后端连接成功
        //   console.log("前后端连接成功")
        //   const msg = result.data.msg;
        //   //打印返回结果状态，
        //   if(result.data.status == 1) {
        //     ElMessage.error(msg);
        //   }
        //   else{
        //     console.log(msg)

        //     proxy.handleClose1().then(result => {
        //     proxy.tableData.splice(0, 1, proxy.studentaddform)
        //   }).catch(err => {

        //   })
        //   ElMessage.success({
        //       message:msg,type:'success'});
        //     // proxy.drawer=false
        //     //重置表单
        //     // let query=proxy.restForm()
        //     // console.log(query)
        //     // proxy.studentaddform.name      =query[0].name
        //     // proxy.studentaddform.gender    =query[0].gender
        //     // proxy.studentaddform.class     =query[0].class
        //     // proxy.studentaddform.account   =query[0].account
        //     // proxy.studentaddform.credit    =query[0].credit
        //     // proxy.studentaddform.SuperAdmin=query[0].SuperAdmin

        //     // proxy.$refs['ruleFormsss'].resetFields()

        //   }
        // }).catch(() => {
        //   console.log("添加失败")
        //   const msg = "添加失败！请稍后尝试！";
        //   ElMessage.error(msg);
        // })
        //
        console.log("成功发送添加请求")

      } catch (error) {
      }
    }
//发送学生个人信息修改数据
    const editStudentInfo_Submit = () => {
      console.log(proxy.stateStudent.index + '-----------------')
      let index = proxy.stateStudent.index;
      let id = proxy.stateStudent.id;
      console.log(index + '--------' + id)
      const form = unref(ruleFormsss);
      const update = JSON.parse(JSON.stringify(studentupdateform))
      const editStudentInfo_data = decodeURI(qs.stringify(update))

      if (!form) return
      try {
        //数据打印
        console.log(editStudentInfo_data)
        //执行post
        editStudentInfo(id, editStudentInfo_data).then((result) => {
          //前后端连接成功
          console.log("前后端连接成功")
          console.log(id)

          const msg = result.data.msg;
          //打印返回结果状态，
          if (result.data.status == 1) {
            ElMessage.error(msg);
          } else {
            // proxy.$set(proxy.studentupdateform,index,1)
            proxy.tableData.splice(index, 1, proxy.studentupdateform)
            proxy.drawerupdate = false
            window.location.href = 'http://localhost:8080/f';
            console.log(msg)
            ElMessage.success({
              message: msg, type: 'success'
            });

          }
        }).catch(() => {

          console.log("no")
          const msg = "更新失败！请稍后尝试！";
          ElMessage.error(msg);
        })
        
        //
        console.log("成功发送更新请求")

      } catch (error) {
      }
    }

//获取学生个人信息学生
    function handleEdit(index, row) {
        console.log(index, row);
        //代理获取属性
        const proxydata=new Proxy(row,{
          get(target,key,receiver){
            const result=Reflect.get(target,key,receiver)
            console.log('get',key)
            return result
          }
        })
        proxydata.id;
        console.log(proxydata.id)
        const params=proxydata.id
        getStudentInfo(params).then(result=>{
           //前后端连接成功
          console.log("前后端连接成功")
          const msg = result.data.msg;
          //打印返回结果状态，
          if(result.data.status == 1) {
            ElMessage.error(msg);
          }
          else {
            //打印后端获取的用户信息数据
            console.log(result.data.result)
            let editData = result.data.result
            proxy.studentupdateform.name = editData[0].name
            proxy.studentupdateform.gender = editData[0].gender
            proxy.studentupdateform.class = editData[0].class
            proxy.studentupdateform.account = editData[0].account
            proxy.studentupdateform.credit = editData[0].credit
            proxy.studentupdateform.SuperAdmin = editData[0].SuperAdmin
            console.log(msg)
            ElMessage.success({
              message: msg, type: 'success'
            });

          }
        }).catch(() => {

          console.log("获取列表失败")
          const msg = "获取列表失败！请稍后尝试！";
          ElMessage.error(msg);

        })
      proxy.stateStudent.index = index;
      proxy.stateStudent.id = params;
    }

      //删除学生
    function handleDelete(index, row) {
        console.log(index, row);
        //代理获取属性
        const proxydata=new Proxy(row,{
          get(target,key,receiver){
            const result=Reflect.get(target,key,receiver)
            console.log('get',key)
            return result
          }
        })
        proxydata.id;
        console.log(proxydata.id)
        const params=proxydata.id
        proxy.$confirm('此操作不可逆，将删除该学生的所有记录, 是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteStudent(params).then(result => {
            proxy.tableData.splice(index, 1)
          }).catch(err => {

          })
          proxy.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          proxy.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }  

    return {
      studentaddform,
      studentupdateform,
      onSubmit,
      editStudentInfo_Submit,
      ruleFormsss,
      handleEdit,
      handleDelete,
      getAllStudentInfo,
      searchbox,
      stateStudent,
      handleClose,
      handleClose1
    }
  }


}

</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.sear{
  overflow: hidden;
  width: 200px;
  background-color: rgb(245, 224, 224);
  margin-bottom: -9px;
  margin-left: 0px;
  border-radius: 30px;
}

/* 给过渡的name加样式 */

.mybox-leave-active,
.mybox-enter-active {
  transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
  width: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
  width: 200px;
}

</style>
